<template>
    <el-dialog v-model="drawer" :append-to-body="true" width="400px" title="选择参与人" @close="close"
        custom-class="activeParticipate">
        <el-form :model="form" :rules="rules" ref="ruleRefForm" size="small" label-width="120px">
            <el-form-item label="选择负责人" prop="participate">
                <!-- <el-cascader v-model="form.participate" :options="options" :props="props" collapse-tags
                    collapse-tags-tooltip clearable /> -->
                <el-select  v-model="form.userId" placeholder="请选择" @change="selectDuty" size="small" style="width:205px">
                    <el-option
                        v-for="item in options"
                        :key="item.userId"
                        :label="item.nickname"
                        :value="item.userId"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-row justify="center">
                <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
                <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
            </el-row>
        </template>
    </el-dialog>
</template>

<script>
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '/@/api/commonApi'

export default {
    name: 'ActiveParticipate',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        id: {
            type: String,
            default: null
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        let { dialogDrawer, id } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {                              
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            form: {},
            rules: {},
            props: {
                multiple: true
            },
            options: [
                // {
                //     id: 1,
                //     label: 'Level 1',
                //     isPenultimate: false
                // },
                // {
                //     id: 2,
                //     label: 'Level 2',
                //     isPenultimate: false,
                //     children: [
                //         {
                //             id: 5,
                //             label: 'Level 2-1',
                //             isPenultimate: false
                //         },
                //         {
                //             id: 6,
                //             label: 'Level 2-2',
                //             isPenultimate: false
                //         },
                //     ],
                // },
                // {
                //     id: 3,
                //     label: 'Level 3',
                //     isPenultimate: false,
                //     children: [
                //         {
                //             id: 7,
                //             label: 'Level 3-1',
                //             isPenultimate: false
                //         },
                //         {
                //             id: 8,
                //             label: 'Level 3-2',
                //             isPenultimate: false
                //         },
                //     ],
                // }
            ]
        })
        watch(() => dialogDrawer.value,
            val => {
                if (val) {
                    getUserList()
                    if (ruleRefForm.value) {
                        ruleRefForm.value.resetFields()
                    }
                }
            }
        )
        const getUserList = () => { 
            console.log(id);    
            api.getEnterpriseUsers().then(res => {
                state.options = res.data
            })
        }
        const selectDuty = e => {
            let list = JSON.parse(JSON.stringify(state.options))
            const result = list.find(item => {
                return item.userId == e
            })
            state.form.userId = result.userId
            state.form.userName = result.nickname
        }
        const close = () => {
            state.form = {}
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate(valid => {
                if (valid) {
                    state.form.activityId = id
                    api.addMarketUser(state.form).then(res => {
                        close()
                        ElMessage.success('提交成功')
                        context.emit('onSubmit', true)
                    })
                    
                }
            })
        }
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            context.emit('update:dialogDrawer', false)
        }
        return {
            drawer,
            ruleRefForm,
            close,
            selectDuty,
            getUserList,
            submitForm,
            cancelForm,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss">
.activeParticipate {
    .el-dialog__body {
        min-height: 150px;
    }
}
</style>